import { message, Button, Col, Form, Input, Row } from "antd";
import { useContext } from "react";
// import { App } from 'antd'
import { useState } from "react";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { Context } from "../App";

function Login() {
  let [loading, setLoading] = useState(false)
  let navigate = useNavigate()
  // // 单页面消息提示
  // let [msg, contextHolder] = message.useMessage()
  // 全局消息提示，使用时需要用App包裹全局，实现全局组件上的消息提示
  // let { message } = App.useApp()


  // // 获取路径中携带的原始跳转路径
  // // 获取query上的参数数据
  // let [searchParams, setSearchParams] = useSearchParams()
  // let path = searchParams.get("path")
  // console.log("000", path, searchParams);


  // 获取全局state中的数据
  let { state, dispatch } = useContext(Context);
  let { navPath } = state
  // console.log(navPath);

  let submit = (values) => {
    // 触发表单提交
    // console.log("表单提交");
    console.log(values);
    setLoading(true)

    // 设置根据获取的表单数据请求后端接口，返回用户信息和token
    setTimeout(() => {
      localStorage.setItem("userInfo", JSON.stringify(values))  // 转换为JSON字符串
      localStorage.setItem("token", true)
      dispatch({ type: "setToken", payload: "123456789" })
      dispatch({ type: "setUserInfo", payload: values })

      setLoading(false)
      // // 单页面 消息提示
      // msg.open({
      //   type: "success",
      //   content: "登录成功"
      // })
      // 全局消息提示
      message.success("登陆成功")
      navigate(navPath ? navPath : "/player/list", { replace: true })
    }, 1000)

  }
  return (
    <>
      {/* {contextHolder} */}
      <Row>
        <Col xl={{ span: 8, offset: 8 }} lg={{ span: 10, offset: 7 }} md={{ span: 14, offset: 5 }} sm={{ span: 18, offset: 3 }} xs={24}>
          {/* onFinish 表单提交后触发的事件，在表单的button需要绑定htmlType="submit"，此按钮点击时触发表单提交  */}
          <Form name="loginForm" layout="vertical" style={{ padding: "20px" }} onFinish={submit}>
            <Form.Item name="username" label="用户名" >
              <Input placeholder="请输入用户名"></Input>
            </Form.Item>
            <Form.Item name="password" label="密码">
              <Input type="password" placeholder="请输入密码"></Input>
            </Form.Item>
            <Button loading={loading} type="primary" htmlType="submit">
              提交
            </Button>
          </Form>
        </Col>
      </Row>
    </>
  );
}

export default Login;